<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>我的</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .nav
    {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #dcdcdc;
        height: 3.5rem;
        line-height: 51px;
    }
    .title{
        width: 4rem;
        height: 3.5rem;
        line-height: 3.5rem;
        margin: 0 auto;
        padding: 0;
        z-index:-1;
    }
    .more{
        height: 3.5rem;
        line-height: 3.5rem;
        position:absolute;
        top: 0;
        right: 0.5rem;
        font-size: 14px;
        color: #3598db;
    }
    .first{
        height: 6rem;
        font-size: 25px;
        line-height: 6rem;
    }
    #name{
        width: 6.5rem;
        height: 2rem;
        margin: 0 auto;
        display: block;
    }
    ul li{
        height: 3rem;
        border-bottom: 1px solid #dcdcdc;
        list-style: none;
        margin: 0 0.5rem 0 0.5rem;
    }
    .carnumber{
        width: 5rem;
        height: 3rem;
        line-height: 3rem;
        float: left;
        padding-left:1rem ;
    }
    .number{
        width: 7rem;
        height: 3rem;
        line-height: 3rem;
        float: right;
        padding-right:1rem ;
    }
    .notes-li{
        border: none;
    }
    .notes{
        width: 90%;
        /*border:1px solid blue;*/
        height:6rem;
        padding: 0.2rem 0.5rem 0 1rem;
        margin: 0.5rem auto;
    }
    .adress{
        width: 100%;
        height: 1.8rem;
        line-height: 1.8rem;
        font-size: 14px;
        font-weight: bolder;
    }
    .reason{
        font-size: 12px;
        height: 1.8rem;
        line-height: 1.8rem;
    }
    .notes-spanright{
        float: right;
        font-size: 14px;
    }
    .notesnumber{
        color: red;
        margin: 0;
        padding: 0;
    }
    .notes-spanleft{
        width: 60%;
        border: 1px solid black;
        overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
        text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
        white-space: nowrap;
        display: -webkit-box;   /*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
        -webkit-line-clamp: 3;  /*设置多少行*/
        -webkit-box-orient: vertical;   /*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
    }
</style>
<body>
<div class="nav">
    <div class="title">我的</div>
    <div class="more" id="more">排行榜</div>
</div>
<div class="first">
    <span id="name">王宇宇</span>
</div>
<ul >
    <li><div class="carnumber">车牌号</div><div class="number">鲁M123456</div></li>
    <li>
        <div class="carnumber">扣分情况</div>
    </li>
    <li class="notes-li" style="height: 5rem;">
        <div class="notes">
            <div>
                <p class="adress">黄河十五路渤海十二路</p>
                <p class="reason">机动车斑马线不礼让行人。</p>
            </div>
            <hr>
            <p class="notes-spanright"><span>罚款：<span class="notesnumber">100</span>元</span><span style="margin-left: 2rem;">扣分：<span class="notesnumber">2</span>分</span></p>
        </div>
        <div class="notes">
            <div>
                <p class="adress">黄河十五路渤海十二路</p>
                <p class="reason">机动车斑马线不礼让行人。</p>
            </div>
            <hr>
            <p class="notes-spanright"><span>罚款：<span class="notesnumber">100</span>元</span><span style="margin-left: 2rem;">扣分：<span class="notesnumber">2</span>分</span></p>
        </div>
        <div class="notes">
            <div>
                <p class="adress">黄河十五路渤海十二路</p>
                <p class="reason">机动车斑马线不礼让行人。</p>
            </div>
            <hr>
            <p class="notes-spanright"><span>罚款：<span class="notesnumber">100</span>元</span><span style="margin-left: 2rem;">扣分：<span class="notesnumber">2</span>分</span></p>
        </div>
    </li>
</ul>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script>
    $(function () {
        $("#more").click(function () {
            $(this).css({'color':'#218cd5'});
            $(location).attr("href","ranklist.html");
        });
    });
</script>
</html>